<template>
	<div class="user-edit">
		<!-- Drawer抽屉 -->
		<Drawer :title="title" v-model="visible" width="820" draggable :mask-closable="false">
			<div :style="{ maxHeight: maxHeight }" class="drawer-content">
				<Form ref="form" :model="form" :rules="formValidate" label-position="top">
					<Row :gutter="32">
						<Col span="24">
							<FormItem label="抽奖图片">
							  <upload-pic-thumb v-model="pics"></upload-pic-thumb>
							</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="12">
							<FormItem label="开奖时间" prop="beginDrawTime	">
								<Date-picker type="datetime" placeholder="选择日期和时间" style="width: 100%" v-model="form.beginDrawTime" @on-change="changeTime"></Date-picker>
							</FormItem>
						</Col>
						<Col span="12">
							<FormItem label="抽奖券数量" prop="drawTicketNum">
								<Input v-model="form.drawTicketNum" />
							</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="12">
							<FormItem label="一等奖名称" prop="firstPrizeName">
								<Input v-model="form.firstPrizeName" />
							</FormItem>
						</Col>
						<Col span="12">
							<FormItem label="一等奖数量" prop="firstPrizeCount">
								<Input v-model="form.firstPrizeCount" />
							</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="12">
							<FormItem label="二等奖名称" prop="secondPrizeName">
								<Input v-model="form.secondPrizeName" />
							</FormItem>
						</Col>
						<Col span="12">
							<FormItem label="二等奖数量" prop="secondPrizeCount">
								<Input v-model="form.secondPrizeCount" />
							</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="12">
							<FormItem label="三等奖名称" prop="threePrizeName">
								<Input v-model="form.threePrizeName" />
							</FormItem>
						</Col>
						<Col span="12">
							<FormItem label="三等奖数量" prop="threePrizeCount">
								<Input v-model="form.threePrizeCount" />
							</FormItem>
						</Col>
					</Row>
					<Row :gutter="32">
						<Col span="24">
							<FormItem label="抽奖备注" prop="drawRemark">
								<Input v-model="form.drawRemark" />
							</FormItem>
						</Col>
					</Row>
				</Form>
			</div>
			<div class="drawer-footer br" v-if="type != 3">
				<Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
				<Button @click="visible = false">取消</Button>
			</div>
		</Drawer>
	</div>
</template>

<script>
	import {
		insertOrUpdateLottery
	} from "@/api/new";
	import {
		validateUsername,
		validateMobile,
		validatePassword,
	} from "@/libs/validate";
	import uploadPicThumb from "@/views/my-components/xboot/upload-pic-thumb";
	export default {
		name: "user",
		components: {
			uploadPicThumb,
		},
		props: {
			value: {
				type: Boolean,
				default: false,
			},
			data: {
				type: Object,
			},
			type: {
				type: String,
				default: "1",
			},
		},
		data() {
			return {
				visible: this.value,
				title: "",
				submitLoading: false,
				maxHeight: 510,
				form: {
					beginDrawTime: '',
					createUserId: localStorage.getItem('userInfo').id,
					drawRemark: '',
					drawTicketNum: '',
					firstPrize: '',
					firstPrizeName: '',
					firstPrizeCount: '',
					pics: '',
					secondPrize: '',
					secondPrizeName: '',
					secondPrizeCount: '',
					threePrize: '',
					threePrizeName: '',
					threePrizeCount: '',
					id: ''
				},
				formValidate: {
					// 表单验证规则
					// username: [{
					// 		required: true,
					// 		message: "请输入登录账号",
					// 		trigger: "change"
					// 	},
					// 	{
					// 		validator: validateUsername,
					// 		trigger: "change"
					// 	},
					// ],
					// nickname: [{
					// 	required: true,
					// 	message: "请输入用户名",
					// 	trigger: "change"
					// }, ],
					// mobile: [{
					// 		required: true,
					// 		message: "请输入手机号",
					// 		trigger: "change"
					// 	},
					// 	{
					// 		validator: validateMobile,
					// 		trigger: "change"
					// 	},
					// ],
					// password: [{
					// 		required: true,
					// 		message: "请输入密码",
					// 		trigger: "change"
					// 	},
					// 	{
					// 		validator: validatePassword,
					// 		trigger: "change"
					// 	},
					// ],
					// email: [{
					// 		required: true,
					// 		message: "请输入邮箱地址"
					// 	},
					// 	{
					// 		type: "email",
					// 		message: "邮箱格式不正确"
					// 	},
					// ]
				},
				pics: []
			};
		},
		methods: {
			submit() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						this.form.firstPrize = this.form.firstPrizeName + ',' + this.form.firstPrizeCount;
						this.form.secondPrize = this.form.secondPrizeName + ',' + this.form.secondPrizeCount;
						this.form.threePrize = this.form.threePrizeName + ',' + this.form.threePrizeCount;
						this.form.pics = this.pics.join(',')
						if (this.type == "1") {
							// 编辑
							this.submitLoading = true;
							console.log('编辑', this.form)
							insertOrUpdateLottery(this.form).then((res) => {
								this.submitLoading = false;
								if (res.code === 200) {
									this.$Message.success("操作成功");
									this.$emit("on-submit", true);
									this.visible = false;
								}
							});
						} else {
							// 添加
							this.submitLoading = true;
							this.form.pics = this.pics.join(',')
							insertOrUpdateLottery(this.form).then((res) => {
								this.submitLoading = false;
								if (res.code === 200) {
									this.$Message.success("操作成功");
									this.$emit("on-submit", true);
									this.visible = false;
								}
							});
						}
					}
				});
			},
			setCurrentValue(value) {
				if (value === this.visible) {
					return;
				}
				if (this.type == "1") {
					this.title = "编辑";
					this.maxHeight =
						Number(document.documentElement.clientHeight - 121) + "px";
				} else if (this.type == "2") {
					this.title = "添加";
					this.maxHeight = Number(document.documentElement.clientHeight - 121) + "px";
				} else {
					this.title = "详情";
				}
				// 清空数据
				this.$refs.form.resetFields();
				if (this.type === "2"){
					// 添加
					this.items = [];
					this.form = {
						drawCategoryId: '',
						drawMoneyLimit: '',
						drawProductGroupName: '',
						drawProductInfos: '',
						remark: ''
					};
				} else {
					this.form = this.data;
					this.pics = this.data.picList;
				}
				this.visible = value;
			},
			changeTime(event) {
				console.log(event);
				this.form.beginDrawTime = event;
			}
		},
		watch: {
			value(val) {
				this.setCurrentValue(val);
			},
			visible(value) {
				this.$emit("input", value);
			},
		},
		// mounted() {
		// 	this.init();
		// },
	};
</script>

<style lang="less">
	@import "../../../styles/drawer-common.less";
</style>
